<template>
    <div id="login">
        <div class="header">
            <van-image
                src="https://tse1-mm.cn.bing.net/th/id/R-C.8ffd6f35dd02bb9b104036fedeffcdf8?rik=wmIhLx3GDssUfQ&riu=http%3a%2f%2fimg.duoziwang.com%2f2019%2f06%2f10190839804216.jpg&ehk=VzaDmQGOA%2fC99dRxmtZgM3DvFCalZrcJ7NPl1hY34vQ%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1"
            ></van-image>
        </div>
        <van-form @submit="onSubmit" :show-error-message="false">
            <input type="text" style="position: absolute; top: -99999px" />
            <input type="password" style="position: absolute; top: -99999px" />
            <van-field
                v-model="username"
                left-icon="phone"
                placeholder="请输入手机号"
                :rules="[
                    {
                        required: true,
                        message: '请填写手机号',
                        validator: $valid.checkTel,
                    },
                ]"
            >
            </van-field>
            <van-field
                v-model="password"
                left-icon="lock"
                placeholder="请输入密码"
                type="password"
                :rules="[{ required: true, message: '请填写密码' }]"
            >
            </van-field>
            <van-checkbox v-model="checked">记住密码</van-checkbox>
            <div class="onReg">
                <van-button block type="info" native-type="submit">
                    登陆
                </van-button>
            </div>
            <van-divider @click="onRegClick">没有账号，去注册</van-divider>
        </van-form>
    </div>
</template>

<script>
export default {
    name: "Login",
    data() {
        return {
            username: "",
            password: "",
            checked: true,
        };
    },
    created() {
        this.username = this.count.username;
        this.password = this.count.password;
    },
    methods: {
        onRegClick() {
            this.$router.push("/reg");
        },
        onSubmit() {
            this.$store
                .dispatch("Login", {
                    telephone: this.username,
                    password: this.password,
                })
                .then((res) => {
                    this.$store.commit("handleAccount", {
                        username: this.username,
                        password: this.password,
                        remenber: this.checked,
                    });
                    this.$toast.success({
                        duration: 600,
                        message: "登陆成功",
                    });
                    let backUrl = this.$route.query.back || "";
                    setTimeout((_) => {
                        this.$router.push("/"+backUrl);
                    }, 600);
                });
        },
    },
    computed: {
        count() {
            return this.$store.state.count;
        },
    },
};
</script>

<style lang="less" scoped>
.header {
    height: 460px;
    padding-bottom: 100px;
    background-color: @blue-light;
    display: flex;
    justify-content: center;
    align-items: center;
}
.van-image {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
}
.van-form {
    margin: -100px 30px 0;
    background-color: #fff;
    padding: 50px 0 30px;
    border-radius: 20px;
    box-shadow: 0 0 8px 8px rgba(0, 0, 0, 0.01);
}
.van-field /deep/ .van-icon {
    color: @gray-5;
}
.van-checkbox {
    padding: 30px 32px 20px;
    font-size: 28px;
}
.onReg {
    margin: 0 16px;
}
.van-divider {
    border-color: #ddd;
    padding: 0 16px;
}
</style>